import React, { useEffect } from 'react';
import styles from './addtest.less';
import { Input, Select, Button ,Form} from 'antd';
const { Option } = Select;
import Editor from 'for-editor'
import { useDispatch, useSelector ,IndexModelState} from 'umi';
import { QuestionModulState } from '@/models/question'
let Addtest: React.FC = function () {
  const dispatch = useDispatch();
  useEffect(() => {
    //获取考试类型
    dispatch({
      type: 'question/getExamType'
    })
    //获取课程类型
    dispatch({
      type: 'question/getSubject'
    })
    //获取试题类型
    dispatch({
      type: 'question/getQuestionsType'
    })
  }, [])
  //拿考试类型数据
  const { examType, subject, questionsType } = useSelector((model: { question: QuestionModulState }) => model.question)
  const { useinfo } = useSelector((model: { login: IndexModelState }) => model.login)
  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
      dispatch({
         type:"question/addexamquestions",
         payload:{
          questions_type_id: values.timutype,
          questions_stem: values.head,
          subject_id: values.classtype,
          exam_id: values.testtype,
          user_id: useinfo.user_id,
          questions_answer: values.daan,
          title: values.title
         }
      })
      
  };
  return (
    <div className={styles.title}>
      <div className={styles.addtesthead}>
        <span>添加考试</span>
      </div>
      <Form
      name="normal_login"
      className="login-form"
      initialValues={{ remember: true }}
      onFinish={onFinish}
    >
      <div className={styles.addtestmain}>
        <div className={styles.addtestmains}>
          <div className={styles.addtestmainsTimu}>
            <div className={styles.addtestmainsTimubox1}>
              <h1>题目信息</h1>
              <h3>题干</h3>
              <Form.Item
              name="head"
              rules={[{ required: true, message: 'Please input your Username!' }]}
             >
              <Input placeholder="题干信息" className={styles.addtestmainsTimuInput} />
              </Form.Item>
            </div>
            <div className={styles.addtestmainsTimubox2}>
              <h3>题目主题</h3>
              <Form.Item
              name="title"
             >
              <Editor />
           </Form.Item>
            </div>
          </div>
          <div className={styles.addtestmainsDaan}>
            <span>
              <h3>请选择考试类型:</h3>
              <Form.Item
              name="testtype"
             >
              {examType.length && <Select style={{ width: 320 }} >
                {examType.map(item => <Option value={item.exam_id} key={item.exam_name}>{item.exam_name}</Option>)}
              </Select>}
              </Form.Item>
            </span>
            <span>
              <h3>请选择课程类型:</h3>
              <Form.Item
              name="classtype"
             >
              {subject.length && <Select style={{ width: 320 }}>
                {subject.map(item => <Option value={item.subject_id} key={item.subject_text}>{item.subject_text}</Option>)}
              </Select>}
              </Form.Item>
            </span>
            <span>
              <h3>请选择题目类型:</h3>
              <Form.Item
              name="timutype"
             >
              {questionsType.length && <Select style={{ width: 320 }}>
                {questionsType.map(item => <Option value={item.questions_type_id} key={item.questions_type_text}>{item.questions_type_text}</Option>)}
              </Select>}
              </Form.Item>
            </span>
          </div>
          <div className={styles.addtestmainsDaan1}>
            <h1>答案信息</h1>
            <Form.Item
              name="daan"
             >
              <Editor />
           </Form.Item>
            <Form.Item
              name="submit"
             >
            <p><Button type="primary" htmlType="submit" className="login-form-button">提交</Button></p>
            </Form.Item>  
          </div>
        </div>
      </div>
      </Form>
    </div>
  );
}
export default Addtest
